<template>
    <view class="container">
        <sc-navbar title="发布订单" back></sc-navbar>
        <sc-view padding="0 12rpx">
            <view class="module-title">手术信息</view>
        </sc-view>
        <view class="item">
            <view class="item-label required">医院名称</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label required"> 科室</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">科室医生</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label required">业务联系人</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label required">手术类型</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label required">手术时间</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">手术部位</view>
            <glo-select-val v-model="form.val" type="input" placeholder="点击输入"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">跟台价格</view>
            <glo-select-val v-model="form.val" type="input" unit="元" placeholder="点击输入"
                inputType="number"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label required">仓库</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">关联单号</view>
            <glo-select-val v-model="form.val" type="display" placeholder="点击选择"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label" style="width: 450rpx !important;">上传图片
                <text class="class" style="font-size: 18rpx;">（最大10MB，支持jpg，jpeg，png）</text>
            </view>
            <glo-upload></glo-upload>
        </view>
        <view class="item">
            <view class="item-label">上传录音</view>
            <view class="recording-upload">
                <up-icon name="mic" color="#1677FF" size="30rpx"></up-icon>
                <text class="recording-text">点击录音</text>
            </view>
        </view>
        <view class="item" style="height: 60rpx;">
            <view class="recording-item">
                <view class="recording-left"></view>
                <view class="recording-right">删除</view>
            </view>
        </view>
        <view class="item" style="height: 60rpx;">
            <view class="recording-item">
                <view class="recording-left"></view>
                <view class="recording-right">删除</view>
            </view>
        </view>
        <view class="remarks-wrap">
            <view class="remarks-label">备注</view>
            <textarea v-model="form.val" placeholder="请输入手术名称、手术部位、手术补充商品及其他手术相关信息" placeholder-style="color: #909399;"
                class="remarks-input" />
        </view>
        <sc-view padding="0 12rpx">
            <view class="module-title">患者信息</view>
        </sc-view>
        <view class="item">
            <view class="item-label">患者姓名</view>
            <glo-select-val v-model="form.val" type="input" placeholder="点击输入"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">患者性别</view>
            <sc-flex pr="50">
                <up-radio-group v-model="radiovalue" placement="row">
                    <up-radio v-for="(item, index) in [{ name: '男', value: '1' }, { name: '女', value: '2' }]"
                        :key="index" :label="item.name" :name="item.name">
                    </up-radio>
                </up-radio-group>
            </sc-flex>
        </view>
        <view class="item">
            <view class="item-label">患者年龄</view>
            <glo-select-val v-model="form.val" type="input" placeholder="点击输入"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">手机号</view>
            <glo-select-val v-model="form.val" type="input" placeholder="点击输入"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">身份证号</view>
            <glo-select-val v-model="form.val" type="input" placeholder="点击输入"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">住院号</view>
            <glo-select-val v-model="form.val" type="input" placeholder="点击输入"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">诊断</view>
            <glo-select-val v-model="form.val" type="input" placeholder="点击输入"></glo-select-val>
        </view>
        <view class="item">
            <view class="item-label">是否紧急</view>
            <sc-flex pr="50">
                <up-radio-group v-model="radiovalue" placement="row">
                    <up-radio v-for="(item, index) in [{ name: '是', value: '1' }, { name: '否', value: '2' }]"
                        :key="index" :label="item.name" :name="item.name">
                    </up-radio>
                </up-radio-group>
            </sc-flex>
        </view>
        <sc-view padding="0 12rpx">
            <view class="module-title">跟台信息</view>
        </sc-view>
        <view class="item">
            <view class="item-label">是否需要跟台人员</view>
            <sc-flex pr="50">
                <up-radio-group v-model="radiovalue" placement="row">
                    <up-radio v-for="(item, index) in [{ name: '是', value: '1' }, { name: '否', value: '2' }]"
                        :key="index" :label="item.name" :name="item.name">
                    </up-radio>
                </up-radio-group>
            </sc-flex>
        </view>
        <view class="item">
            <view class="item-label">是否自备工具</view>
            <sc-flex pr="50">
                <up-radio-group v-model="radiovalue" placement="row">
                    <up-radio v-for="(item, index) in [{ name: '是', value: '1' }, { name: '否', value: '2' }]"
                        :key="index" :label="item.name" :name="item.name">
                    </up-radio>
                </up-radio-group>
            </sc-flex>
        </view>
        <sc-footer height="150">
            <sc-button type="primary" text="提交订单" width="262" height="75" @click="handleSubmit"></sc-button>
        </sc-footer>
    </view>
</template>

<script setup>
const form = ref({
    val: "",
});

const radiovalue = ref("");

const handleSubmit = () => {
    uni.navigateTo({
        url: '/subOrder/pages/orderPlaceSuccess'
    })
}

</script>

<style lang="scss" scoped>
.module-title {
    width: 750rpx;
    height: 75rpx;
    background: #FFFFFF;
    border-bottom: 1rpx solid #e6e6e6;
    padding: 30rpx 0 0 21rpx;
    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
    font-weight: 400;
    font-size: 26rpx;
    color: #838383;
    line-height: 38rpx;
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx 0 60rpx;
    width: 750rpx;
    height: 120rpx;

    .item-label {
        position: relative;
        width: 250rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 26rpx;
        color: #3D3D3D;
        line-height: 45rpx;

        &.required {
            &::before {
                position: absolute;
                left: -15rpx;
                content: '*';
                color: #FF0000;
            }
        }
    }
}

.recording-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90rpx;
    height: 90rpx;
    background: #E7F1FF;
    border-radius: 8rpx;

    .recording-text {
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 15rpx;
        color: #3D3D3D;
        line-height: 35rpx;
    }


}

.recording-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .recording-left {
        padding: 0 35rpx;
        width: 495rpx;
        height: 45rpx;
        background: #E7F1FF;
        border-radius: 8rpx;
    }

    .recording-right {
        font-weight: 400;
        font-size: 23rpx;
        color: #FF5050;
        line-height: 45rpx;
    }
}

.remarks-wrap {
    padding: 20rpx 37rpx;

    .remarks-label {
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 26rpx;
        color: #3D3D3D;
        line-height: 45rpx;
    }

    .remarks-input {
        margin-top: 20rpx;
        padding: 22rpx 35rpx;
        width: 675rpx;
        height: 278rpx;
        background: rgba(22, 119, 255, 0.1);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 23rpx;
    }
}
</style>